<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* *{padding: 0;margin: 0;} */
        .wrap{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            /* margin: 20px; */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <h2>.ctrl</h2>
            <div class="wrap" @click.ctrl="wrapHandler"></div>
        </div>

        <div>
            <h2>.alt</h2>
            <input type="text" @keydown.alt.c="keydownHandler">
        </div>
        
    </div>
</body>
<script>
    // v-on  绑定事件
    // 用法:
    // v-on:参数="指令值"     
    // 参数=> 绑定的事件类型   
    // 指令值: 
    //    1. javascript表达式=> 事件触发时执行   
    //    2. 函数(事件处理函数)   -> 此函数直接绑给事件  -> 事件触发时直接执行该函数   
    //    3. 函数调用
    //    4. 传入箭头函数

    // Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
    // v-on:参数.修饰符="指令值"     
    // 参数=> 绑定的事件类型   

    // 修饰符 => 可以在事件触发时, 对事件进行修饰符
    // 事件修饰符  => 事件触发时,可以阻止事件冒泡 捕获  浏览器默认行为
    // .stop    阻止事件传播
    // .prevent  阻止浏览器的默认行为
    // .capture  事件触发时,以事件捕获形式传播
    // .self     只有绑定事件的元素本身可以触发
    // .once     事件只触发一次
    // .passive  事件会立即触发一次 .passive 修饰符尤其能够提升移动端的性能。

    // 按键修饰符  => 事件触发时,只有指定按键方可触发
    // .enter
    // .left
    // .right
    // .up
    // .down
    // .page-up
    // .page-down
    // .tab
    // .delete (捕获“删除”和“退格”键)
    // .esc
    // .space
    // .键盘码

    // 系统修饰符   修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
    // .ctrl
    // .shift
    // .meta
    // .alt

    // 指令值: 
    //    1. javascript表达式=> 事件触发时执行   
    //    2. 函数(事件处理函数)   -> 此函数直接绑给事件  -> 事件触发时直接执行该函数   
    //    3. 函数调用
    //    4. 传入箭头函数

    // 简写:
    // v-on:  可以简写为 @

   var vm =  new Vue({
        el: "#app",
        data: {
            msg: "hello",
            count:1,
        },
        methods: {
            wrapHandler:function(){
                console.log("wrap被点击");
            },
            keydownHandler(e){
                console.log("按键被按下",e.key);
            },
        }
    })
    console.log(vm);


</script>

</html>